<template>
  <el-dialog
    width="400px"
    @close="handleClose"
    center
    :title="$t('common.changeChannel')"
    :visible.sync="currentVisible">
     <el-form :model="form" class="bind-auth-modal" ref="channelForm" label-position="top">
        <!-- 短信验证码渠道 -->
      <el-form-item :label="index === 0 ? $t('common.SMSVerificationCodeChannel') : ''" class="item" v-for="(msg, index) in form.msgList" :key="index" :prop="`msgList.${index}.value`" :rules="{required: true, message: $t('verify.plsInput'), trigger: 'blur'}">
        <label>{{index + 1}}.</label>
        <el-select class="item-select" type="text" v-model="msg.value" @focus="handleFixOptions(index)">
          <el-option v-for="item in newotpProviders" :key="item" :label="item" :value="item"></el-option>
        </el-select>
        <!-- 删除 -->
        <span @click="handleDel(index)"><i v-if="index > 0" class="el-icon-delete"></i></span>
      </el-form-item>
      <!-- 添加短信验证码 -->
      <footer class="add" @click="handleAdd">
        <i class="el-icon-plus"></i>
      </footer>
      <!-- 通知类短信渠道 -->
      <el-form-item class="item" prop="noticeContent" :label="$t('common.noticeSMSChannel')" :rules= "{required: true, message: $t('verify.plsInput'), trigger: 'blur'}">
         <el-select class="item-select" type="text" v-model="form.noticeContent" >
            <el-option v-for="item in noticeProviders" :key="item" :label="item" :value="item"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item class="btns">
        <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
        <el-button @click="handleConfirm" type="primary">{{ $t('common.confirm') }}</el-button>
      </el-form-item>
     </el-form>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        currentVisible: false,
        // 短信验证码渠道
        form: {
          msgList: [
            { value: '' },
          ],
          noticeContent: null
        },
        newotpProviders: [],
        // 通知类短信渠道
        noticeProviders: [],
        // 短信验证码渠道
        otpProviders: []
      }
    },
    watch: {
      visible: {
        handler (value) {
          this.currentVisible = value
          if (value) this.getData()
        },
        immdiate: true
      }
    },
    methods: {
      handleFixOptions (index) { // 处理数据
        if (this.form.msgList.length <= 1) { // 第一条不能删除
          this.newotpProviders = this.otpProviders
        } else {
          const newMsgList = JSON.parse(JSON.stringify(this.form.msgList))
          // 当前选中的数据不删除
          newMsgList.splice(index, 1)
          this.newotpProviders = this.otpProviders.filter(item => !newMsgList.map(item1 => item1.value).includes(item))
        }
      },
      handleDel (i) { // 删除短信验证码渠道
        this.form.msgList.splice(i, 1)
      },
      handleAdd () { // 添加短信验证码渠道
        this.form.msgList.push({ value: '' })
      },
      async getData () { // 获取初始化数据
        const res = await this.$api.sms.getSmsSendProvider({})// 查询自动发送短信渠道
        const {status, data, error} = res
        if ('1' === status && '00000000' === error && data) {
          const { otpProviders, noticeProviders } = data
          this.otpProviders = otpProviders
          this.noticeProviders = noticeProviders
        }
        const res1 = await this.$api.sms.getCurrentSmsSendProvider()
        if ('1' === res1.status && '00000000' === res1.error && res1.data) {
          const { otpProviders, noticeProviders } = res1.data
          this.form = {
            msgList: otpProviders.map(item => ({ value: item })),
            noticeContent: noticeProviders
          }
        }
        this.handleFixOptions()
      },
      handleClose () {
        this.form = {
          msgList: [{ value: '' }],
          noticeContent: null
        }
        this.$emit('update:visible', false);
      },
      handleConfirm () {
        this.$refs.channelForm.validate((val) => {
          if (val) {
            const otpContent = this.form.msgList.map(item => item.value).join(',')
            const params = {
              otpContent,
              noticeContent: this.form.noticeContent
            }
            console.log(params)
            this.$api.sms.changeSmsSendChannel(params).then(res => {
              const {status, error} = res
              if ('1' === status && '00000000' === error) {
                this.$message.success(this.$tc('common.successfulOperation'))
                this.handleClose()
                this.$emit('handleOk')
              }
            })
          } else {
            return false
          }
        })
      }
    }
  }
</script>

<style lang="scss">
.item {
  margin-top: 10px;
  &-select {
    width: 80%;
    margin: 0 10px;
  }
  .el-icon-delete {
    margin-top: 10px;
    font-size: 20px;
    cursor: pointer;
  }
}
.add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px !important;
  margin-top: 10px;
  padding: 10px 0;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: #ccc !important;
  cursor: pointer;
  }
  .btns {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 20px;
  }
</style>